<template>
  <div class="horizontal-container">
    <div>
      <!-- 左侧关系类和关系实例 -->
      <RelationClassAndRelationInstance />
    </div>
    <!-- 中间内容区域 -->
    <div class="content-area">
      <textarea id="editor" v-model="form.content"></textarea>
    </div>
    <div>
      <!-- 右侧文档信息区域 -->
      <DocumentInfo />
    </div>
    <!-- 自动标注关系对话框 -->
    <AutoAnnotateRelationDialog v-model:visible="autoAnnotateRelationVisible"
      @close="autoAnnotateRelationVisible = false" />
    <!-- 关系标注工具 -->
    <RelationAnnotationTool v-model:visible="relationAnnotationToolVisible" :editor="editor"
      :sourceEntity="sourceEntity" :targetEntity="targetEntity" @relationAdded="handleRelationAdded" />
  </div>
</template>

<script setup>
import { nextTick, onMounted, reactive, ref, watch, onBeforeUnmount } from 'vue'
import { useRoute } from 'vue-router'
import axios from '@/plugins/axios'
// eslint-disable-next-line no-unused-vars
import DocumentInfo from './DocumentInfo.vue'
import RelationClassAndRelationInstance from './RelationClassAndRelationInstance.vue'
import AutoAnnotateRelationDialog from './AutoAnnotateRelationDialog.vue'
import RelationAnnotationTool from './RelationAnnotationTool.vue'
import { useEditorStore } from '@/store/editor'
import { ElMessage } from 'element-plus'

// 获取路由参数
const route = useRoute()
const documentId = ref('')

// 使用编辑器状态管理
const editorStore = useEditorStore()

const form = reactive({
  content: ''
})

// 编辑器实例引用
const editor = ref(null)

// 关系标注相关状态
const sourceEntity = ref(null)
const targetEntity = ref(null)

// 对话框显示状态
const autoAnnotateRelationVisible = ref(false)
const relationAnnotationToolVisible = ref(false)

// 存储已创建的关系线元素，用于后续清理
const relationLines = ref([]);

// 存储定时器ID
const relationSaveInterval = ref(null);

// 从后端获取文档内容
const fetchDocumentContent = async () => {
  try {
    // 从路由参数获取文档ID
    documentId.value = route.params.documentId || route.query.documentId

    if (!documentId.value) {
      console.error('[关系标注] 未找到文档ID，无法获取内容')
      return
    }

    console.log('[关系标注] 获取文档内容，ID:', documentId.value)
    const response = await axios.get(`/api/document/${documentId.value}/content`)

    if (response.data && response.data.success) {
      // 将后端返回的内容设置到编辑器
      const content = response.data.data || ''
      form.content = content

      // 如果编辑器已初始化，也设置内容
      if (editor.value) {
        editor.value.setContent(content)
        console.log('[关系标注] 设置编辑器内容成功')
        // 内容设置后绘制关系线
        setTimeout(() => {
          drawAllRelations()
        }, 500)
      }
    } else {
      console.error('[关系标注] 获取文档内容失败:', response.data?.message || '未知错误')
    }
  } catch (error) {
    console.error('[关系标注] 获取文档内容出错:', error)
  }
}

// 保存文档内容到后端的函数
const saveDocumentToBackend = async (content) => {
  try {
    if (!documentId.value) {
      console.error('[关系标注] 未找到文档ID，无法保存内容')
      return
    }

    const response = await axios.post('/update_document_content', {
      documentId: documentId.value,
      content: content
    })

    if (response.data.code === 200) {
      console.log('[关系标注] 文档内容保存成功')
    } else {
      console.error('[关系标注] 文档内容保存失败:', response.data.message)
    }
  } catch (error) {
    console.error('[关系标注] 保存内容到后端失败:', error)
  }
}

// 创建防抖函数，避免频繁更新导致的性能问题
const debounce = (fn, delay = 300) => {
  let timer = null;
  return function (...args) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
};

// 使用防抖函数包装保存方法
const debouncedSaveContent = debounce(saveDocumentToBackend, 1000);

// 动态引入 TinyMCE
const loadTinyMCE = () => {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script')
    script.src = '/tinymce/tinymce.min.js'
    script.onload = resolve
    script.onerror = reject
    document.head.appendChild(script)
  })
}

// 清除所有箭头指示器
const clearArrowIndicators = () => {
  // 确保只在关系标注页面清理箭头指示器
  if (editorStore.annotationMode !== 'relation') {
    return;
  }

  if (editor.value) {
    try {
      const editorBody = editor.value.getBody();
      const existingArrows = editorBody.querySelectorAll('.entity-arrow-indicator');
      existingArrows.forEach(arrow => {
        try {
          if (arrow && arrow.parentNode) {
            arrow.parentNode.removeChild(arrow);
          }
        } catch (error) {
          console.warn('移除箭头指示器时出错:', error);
        }
      });
    } catch (error) {
      console.warn('清除箭头指示器过程中出错:', error);
    }
  }
};

// 显示箭头指示器
const showArrowIndicator = (entityElement, currentEditor) => {
  // 确保当前是关系标注模式
  if (editorStore.annotationMode !== 'relation') {
    return;
  }

  // 清除现有的箭头指示器
  clearArrowIndicators();

  // 创建箭头指示元素
  const arrow = currentEditor.getDoc().createElement('span');
  arrow.className = 'entity-arrow-indicator';
  arrow.innerHTML = '➜';
  arrow.style.color = 'blue';
  arrow.style.fontWeight = 'bold';
  arrow.style.fontSize = '20px'; // 增大字体
  arrow.style.padding = '0 5px'; // 添加内边距
  arrow.style.display = 'inline-block'; // 确保显示为块元素
  arrow.style.verticalAlign = 'middle'; // 垂直居中
  arrow.style.position = 'absolute'; // 使用绝对定位
  arrow.style.left = '100%'; // 放在实体的末尾
  arrow.style.top = '50%'; // 垂直居中
  arrow.style.transform = 'translateY(-50%)'; // 精确垂直居中
  arrow.style.zIndex = '20'; // 确保箭头在文本上方
  arrow.style.marginLeft = '2px'; // 微调箭头位置

  // 将箭头添加为实体元素的子元素
  entityElement.style.position = 'relative';
  entityElement.appendChild(arrow);
};

// 监听编辑器内容变化，保存到后端
watch(() => form.content, (newContent) => {
  console.log('[关系标注] 当前编辑器内容:', newContent)

  // 保存到后端
  if (newContent) {
    debouncedSaveContent(newContent)
  }

  // 内容变化时重新绘制关系箭头
  setTimeout(() => {
    clearRelationLines();
    drawAllRelations();
  }, 100);
})

// 监听窗口大小变化，重新绘制关系箭头
const handleResize = () => {
  console.log('窗口大小变化，重新绘制关系箭头');
  // 延迟执行，确保DOM已更新
  clearTimeout(window.resizeTimer);
  window.resizeTimer = setTimeout(() => {
    if (editor.value && editor.value.getBody) {
      clearRelationLines();
      drawAllRelations();
    }
  }, 300);
};

// 处理实体点击事件
const handleEntityClick = (e, editorInstance) => {
  // 使用传入的编辑器实例或全局编辑器实例
  const currentEditor = editorInstance || editor.value;
  // 检查点击的是否是实体标注
  const target = e.target;
  if (target.classList.contains('entity')) {
    const entityId = target.getAttribute('data-entity-id');
    const entityText = target.textContent;
    const entityStyle = target.getAttribute('style');
    const entityType = entityId.split('_')[0]; // 获取实体类型

    console.log('点击了实体:', entityId, entityText);

    // 如果已经选择了源实体，则设置目标实体
    if (sourceEntity.value) {
      // 不允许选择相同的实体
      if (sourceEntity.value.id === entityId) {
        ElMessage.warning('不能选择相同的实体作为源和目标');
        return;
      }

      // 设置目标实体
      targetEntity.value = {
        id: entityId,
        text: entityText,
        style: entityStyle,
        type: entityType
      };

      // 高亮显示目标实体，使用更明显的样式
      target.style.outline = '2px solid blue';
      target.style.boxShadow = '0 0 5px blue';
      target.setAttribute('title', `目标实体: ${entityText} (ID: ${entityId})`);

      // 清除箭头指示器
      clearArrowIndicators();

      // 检查是否存在适用的关系并显示关系对话框
      checkAndShowRelationDialog();
    } else {
      // 设置源实体
      sourceEntity.value = {
        id: entityId,
        text: entityText,
        style: entityStyle,
        type: entityType
      };

      // 高亮显示源实体，使用更明显的样式
      target.style.outline = '2px solid red';
      target.style.boxShadow = '0 0 5px red';
      target.setAttribute('title', `源实体: ${entityText} (ID: ${entityId})`);

      // 在源实体内部显示箭头指示
      showArrowIndicator(target, currentEditor);

      // 显示提示消息
      ElMessage.info(`已选择源实体: ${entityText} (ID: ${entityId})，请选择目标实体`);
    }
  } else {
    // 点击了非实体区域，清除箭头指示器和实体选择
    if (sourceEntity.value && !targetEntity.value) {
      clearEntitySelection();
      ElMessage.info('已取消实体选择');
    }
  }
};

// 检查是否存在适用的关系并显示关系对话框
const checkAndShowRelationDialog = () => {
  // 检查实体存在性
  if (!sourceEntity.value || !targetEntity.value) {
    return;
  }

  // 检查是否已存在关系
  const editorBody = editor.value.getBody();
  const existingRelations = editorBody.querySelectorAll('span[data-relation-id][data-relation-role="source"]');
  let hasExistingRelation = false;
  let existingRelationType = '';
  let existingRelationId = '';

  existingRelations.forEach(relationSpan => {
    const relationSource = relationSpan.getAttribute('data-entity-id');
    const relationTarget = relationSpan.getAttribute('data-relation-target');
    const relationId = relationSpan.getAttribute('data-relation-id');

    // 检查两个实体之间是否已存在任何类型的关系
    if ((relationSource === sourceEntity.value.id && relationTarget === targetEntity.value.id) ||
      (relationSource === targetEntity.value.id && relationTarget === sourceEntity.value.id)) {
      // 获取关系类型名称
      const relation = window.relations.find(r => r.id === relationId);
      if (relation) {
        hasExistingRelation = true;
        existingRelationType = relation.text;
        existingRelationId = relationId;
      }
    }
  });

  if (hasExistingRelation) {
    // 不询问用户，直接记录现有关系信息以便后续替换
    window.relationToReplace = {
      sourceId: sourceEntity.value.id,
      targetId: targetEntity.value.id,
      relationId: existingRelationId
    };

    console.log(`发现已存在的关系"${existingRelationType}"，将在添加新关系时替换`);
  } else {
    // 没有现有关系，清除替换标记
    window.relationToReplace = null;
  }

  // 检查实体类型是否有对应的关系类型
  const sourceType = sourceEntity.value.type || sourceEntity.value.id.split('_')[0];
  const targetType = targetEntity.value.type || targetEntity.value.id.split('_')[0];

  console.log('检查关系:', sourceType, targetType);

  // 获取全局关系列表并筛选适用关系
  const relations = window.relations || [];
  const availableRelations = relations.filter(relation => {
    const relationSourceType = relation.source.split('_')[0];
    const relationTargetType = relation.target.split('_')[0];
    console.log('关系类型:', relationSourceType, relationTargetType);

    // 检查关系的源和目标类型是否与选定实体的类型匹配
    return relationSourceType === sourceType && relationTargetType === targetType;
  });

  console.log('可用关系:', availableRelations);

  // 根据筛选结果显示对话框或错误信息
  if (availableRelations.length > 0) {
    // 显示关系标注工具
    relationAnnotationToolVisible.value = true;
  } else {
    // 显示错误信息并清除选择
    ElMessage.error(`没有找到 ${sourceType} -> ${targetType} 的关系类型`);
    clearEntitySelection();
  }
};

// 清除实体选择和高亮，还有箭头提示
const clearEntitySelection = () => {
  // 清除实体引用
  sourceEntity.value = null;
  targetEntity.value = null;

  // 清除高亮样式
  if (editor.value) {
    const entitySpans = editor.value.getBody().querySelectorAll('span.entity');
    entitySpans.forEach(span => {
      span.style.outline = '';
      span.style.boxShadow = '';
      span.removeAttribute('title');
    });

    // 移除箭头指示
    clearArrowIndicators();
  }
};

// 绘制所有关系箭头
const drawAllRelations = () => {
  // Clear existing relation lines
  clearRelationLines();

  // Ensure editor instance exists
  if (!editor.value || !editor.value.getBody) {
    console.warn('编辑器实例不存在或未完全初始化');
    return;
  }

  // 确保LeaderLine库已加载
  if (typeof window.LeaderLine === 'undefined') {
    console.warn('LeaderLine库未加载，无法绘制关系箭头');
    return;
  }

  // 清理编辑器内容中可能存在的关系文本标签
  cleanupRelationLabelsInContent();

  const editorBody = editor.value.getBody();
  if (!editorBody) {
    console.warn('编辑器Body不存在，无法绘制关系箭头');
    return;
  }

  // 从localStorage获取关系数据
  let relationsData = [];
  try {
    const relationsDataStr = localStorage.getItem('relationsData');
    console.log('从localStorage获取的关系数据:', relationsDataStr);
    if (relationsDataStr) {
      relationsData = JSON.parse(relationsDataStr);
      console.log('从localStorage获取的关系数据，然后解析的数据:', relationsData);
    }
  } catch (error) {
    console.error('解析关系数据时出错:', error);
    return;
  }

  if (relationsData.length === 0) {
    console.log('未找到任何关系数据');
    return;
  }

  console.log(`找到 ${relationsData.length} 个关系数据，开始绘制关系箭头`);

  // Find all spans with data-relation-id and data-relation-role="source"
  const sourceSpans = editorBody.querySelectorAll('span[data-relation-id][data-relation-role="source"]');
  console.log(`找到 ${sourceSpans.length} 个关系源标注`);

  // 如果没有找到关系源标注，但有关系数据，则尝试根据实体ID直接绘制
  if (sourceSpans.length === 0 && relationsData.length > 0) {
    console.log('未找到关系源标注，尝试根据实体ID直接绘制关系箭头');
    drawRelationsFromData(relationsData, editorBody);
    return;
  }

  // 用于跟踪已绘制的关系，防止重复
  const drawnRelations = new Set();

  // Iterate over all source entity spans
  sourceSpans.forEach((sourceSpan, index) => {
    const sourceId = sourceSpan.getAttribute('data-entity-id');
    const targetId = sourceSpan.getAttribute('data-relation-target');
    const relationId = sourceSpan.getAttribute('data-relation-id');

    if (!sourceId || !targetId || !relationId) {
      console.warn(`关系源标注 ${index + 1} 缺少必要属性:`,
        sourceId ? '' : '缺少data-entity-id',
        targetId ? '' : '缺少data-relation-target',
        relationId ? '' : '缺少data-relation-id');
      return;
    }

    // 创建关系的唯一标识符（包含关系ID，确保不同类型的关系可以共存）
    const relationKey = `${sourceId}-${targetId}-${relationId}`;

    // 如果已经绘制过这个完全相同的关系，则跳过
    if (drawnRelations.has(relationKey)) {
      console.log(`跳过重复的关系 ${index + 1}:`, sourceId, '->', targetId, relationId);
      return;
    }

    // 获取关系类型文本
    const relation = window.relations ? window.relations.find(r => r.id === relationId) : null;
    const relationText = relation ? relation.text : '';

    console.log(`处理关系 ${index + 1}:`, sourceId, '->', targetId, relationText, relationId);

    // Find source and target entities
    const sourceElement = sourceSpan; // Source entity is the current element
    const targetElement = editorBody.querySelector(`span[data-entity-id="${targetId}"]`);

    if (sourceElement && targetElement) {
      console.log(`找到源实体和目标实体，绘制关系线`);
      try {
        // Create relation arrow - 使用false参数，不清除现有箭头
        drawRelationLine(
          { id: sourceId },
          { id: targetId },
          { id: relationId, text: relationText },
          false // 不清除现有箭头
        );

        // 标记为已绘制
        drawnRelations.add(relationKey);
      } catch (error) {
        console.error(`绘制关系线 ${index + 1} 时出错:`, error);
      }
    } else {
      console.warn(`未找到关系 ${index + 1} 的源实体或目标实体:`,
        sourceElement ? '源实体存在' : '源实体不存在',
        targetElement ? '目标实体存在' : '目标实体不存在');
    }
  });

  // Log if no relations found
  if (sourceSpans.length === 0) {
    console.log('未找到任何关系标注');
  }

  // 同步关系数据到editorStore
  const existingRelations = JSON.parse(localStorage.getItem('relationsData') || '[]');
  syncRelationsToStore(existingRelations);
};

// 根据关系数据直接绘制关系箭头
const drawRelationsFromData = (relationsData, editorBody) => {
  // 用于跟踪已绘制的关系，防止重复
  const drawnRelations = new Set();

  // 遍历所有关系数据
  relationsData.forEach((relationData, index) => {
    if (!relationData.sourceEntity || !relationData.targetEntity || !relationData.relation) {
      console.warn(`关系数据 ${index + 1} 格式不正确:`, relationData);
      return;
    }

    const sourceId = relationData.sourceEntity.id;
    const targetId = relationData.targetEntity.id;
    const relationId = relationData.relation.id;
    const relationText = relationData.relation.text || '';

    if (!sourceId || !targetId || !relationId) {
      console.warn(`关系数据 ${index + 1} 缺少必要属性:`, relationData);
      return;
    }

    // 创建关系的唯一标识符
    const relationKey = `${sourceId}-${targetId}-${relationId}`;

    // 如果已经绘制过这个完全相同的关系，则跳过
    if (drawnRelations.has(relationKey)) {
      console.log(`跳过重复的关系 ${index + 1}:`, sourceId, '->', targetId, relationId);
      return;
    }

    // 查找源实体和目标实体元素
    const sourceElement = editorBody.querySelector(`span[data-entity-id="${sourceId}"]`);
    const targetElement = editorBody.querySelector(`span[data-entity-id="${targetId}"]`);

    if (sourceElement && targetElement) {
      console.log(`找到源实体和目标实体，绘制关系线:`, sourceId, '->', targetId, relationText);
      try {
        // 创建一个唯一的ID用于关系线
        const lineId = `relation-${sourceId}-${targetId}-${relationId}-${Date.now()}`;

        // 获取关系类的样式
        const relations = window.relations || [];
        const relationClass = relations.find(r => r.id === relationId);
        if (!relationClass) {
          console.warn(`未找到关系类 ${relationId}，使用默认样式`);
        }
        const color = relationClass?.style?.['background-color'] || '#1890ff';

        // 确定最佳连接点
        let startSocket = 'top';
        let endSocket = 'bottom';
        const path = 'fluid';

        // 根据元素位置确定最佳连接点
        const sourceRect = sourceElement.getBoundingClientRect();
        const targetRect = targetElement.getBoundingClientRect();

        if (targetRect.top + targetRect.height < sourceRect.top) {
          startSocket = 'top';
          endSocket = 'bottom';
        } else if (targetRect.top > sourceRect.top + sourceRect.height) {
          startSocket = 'bottom';
          endSocket = 'top';
        } else if (targetRect.left + targetRect.width < sourceRect.left) {
          startSocket = 'left';
          endSocket = 'right';
        } else {
          startSocket = 'right';
          endSocket = 'left';
        }

        // 创建LeaderLine实例
        const line = new window.LeaderLine(
          sourceElement,
          targetElement,
          {
            color: color,
            size: 2.5,
            startSocket: startSocket,
            endSocket: endSocket,
            path: path,
            startSocketGravity: 50,
            endSocketGravity: 50,
            startPlug: 'behind',
            endPlug: 'arrow3',
            endPlugSize: 1.5,
            startPlugColor: color,
            endPlugColor: color,
            animOptions: { duration: 300, timing: 'linear' }
          }
        );

        // 添加关系文本标签
        if (relationText) {
          line.setOptions({
            middleLabel: window.LeaderLine.captionLabel(relationText, {
              color: color,
              fontWeight: 'bold',
              fontSize: '12px',
              fontFamily: 'Arial, sans-serif',
              padding: [4, 8, 4, 8],
              backgroundColor: 'white',
              borderRadius: 3,
              borderWidth: 1.5,
              borderColor: color
            })
          });

          if (relationText === '引用') {
            line.setOptions({
              dash: { len: 5, gap: 3 }
            });
          }
        }

        // 保存关系线信息
        relationLines.value.push({
          id: lineId,
          sourceId: sourceId,
          targetId: targetId,
          relationId: relationId,
          relationText: relationText,
          leaderLine: line
        });

        // 确保关系线元素不会被保存到编辑器内容中
        setTimeout(() => {
          // 查找LeaderLine创建的所有元素
          const leaderLineElements = document.querySelectorAll('div.leader-line, div.leader-line-label-wrapper, div.leader-line-caption, div.leader-line-line, div.leader-line-plug, div.leader-line-marker');
          leaderLineElements.forEach(element => {
            // 添加属性，使TinyMCE忽略这些元素
            element.setAttribute('data-mce-bogus', 'all');
            // 额外添加一个自定义属性，便于后续清理
            element.setAttribute('data-leader-line-element', 'true');
          });
        }, 50);

        // 标记为已绘制
        drawnRelations.add(relationKey);
      } catch (error) {
        console.error(`绘制关系线 ${index + 1} 时出错:`, error);
      }
    } else {
      console.warn(`未找到关系 ${index + 1} 的源实体或目标实体:`,
        sourceElement ? '源实体存在' : '源实体不存在',
        targetElement ? '目标实体存在' : '目标实体不存在');
    }
  });

  console.log(`已绘制 ${drawnRelations.size} 个关系箭头`);
};

// 清理编辑器内容中可能存在的关系文本标签
const cleanupRelationLabelsInContent = () => {
  if (!editor.value) return;

  // 获取当前编辑器内容
  const content = editor.value.getContent();

  // 查找并移除可能的LeaderLine标签元素，包括关系文本标签
  // 更全面的正则表达式，匹配所有可能的LeaderLine相关元素
  const cleanedContent = content
    .replace(/<div[^>]*leader-line[^>]*>.*?<\/div>/g, '')
    .replace(/<div[^>]*leader-line-label-wrapper[^>]*>.*?<\/div>/g, '')
    .replace(/<div[^>]*leader-line-caption[^>]*>.*?<\/div>/g, '')
    .replace(/<div[^>]*leader-line-line[^>]*>.*?<\/div>/g, '')
    .replace(/<div[^>]*leader-line-plug[^>]*>.*?<\/div>/g, '')
    .replace(/<div[^>]*leader-line-marker[^>]*>.*?<\/div>/g, '');

  // 如果内容有变化，则更新编辑器内容（但不触发change事件）
  if (cleanedContent !== content) {
    console.log('清理了编辑器内容中的关系标签');

    // 暂时移除change事件监听器
    const originalHandlers = editor.value.off('change');

    // 设置清理后的内容
    editor.value.setContent(cleanedContent);

    // 恢复change事件监听器
    if (originalHandlers) {
      editor.value.on('change', originalHandlers);
    }

    // 更新本地状态
    form.content = cleanedContent;
  }
};

// 保存关系线信息到localStorage
const saveRelationLinesToLocalStorage = () => {
  if (relationLines.value && relationLines.value.length > 0) {
    try {
      // 提取关系线的关键信息
      const linesInfo = relationLines.value.map(line => ({
        id: line.id,
        sourceId: line.sourceId,
        targetId: line.targetId,
        relationId: line.relationId,
        relationText: line.relationText,
        // 添加连接点和样式信息
        startSocket: line.leaderLine?.startSocket || 'top',
        endSocket: line.leaderLine?.endSocket || 'bottom',
        color: line.leaderLine?.color || '#1890ff',
        dash: line.leaderLine?.dash || null
      }));

      // 保存到localStorage
      localStorage.setItem('relationLinesInfo', JSON.stringify(linesInfo));
      // console.log('已保存关系线信息到localStorage:', linesInfo.length);
    } catch (error) {
      console.error('保存关系线信息到localStorage时出错:', error);
    }
  }
};

// 组件挂载时
onMounted(() => {
  try {
    console.log('关系标注组件挂载');

    // 设置当前标注模式
    editorStore.setAnnotationMode('relation');

    // 确保在组件挂载时清理所有箭头指示器
    setTimeout(() => {
      if (editor.value) {
        clearArrowIndicators();
      }
    }, 500);

    // 监听窗口大小变化，重新绘制关系线
    window.addEventListener('resize', handleResize);

    // 添加页面可见性变化监听，确保在页面从隐藏变为可见时重新绘制关系箭头
    document.addEventListener('visibilitychange', handleVisibilityChange);

    // 清除可能存在的LeaderLine元素（从之前的会话中残留）
    try {
      const leaderLineElements = document.querySelectorAll('div.leader-line, div.leader-line-label-wrapper, div.leader-line-caption, div.leader-line-line, div.leader-line-plug, div.leader-line-marker, [data-leader-line-element="true"]');
      leaderLineElements.forEach(element => {
        if (element && element.parentNode) {
          element.parentNode.removeChild(element);
        }
      });
    } catch (error) {
      console.warn('清除残留LeaderLine元素时出错:', error);
    }

    loadTinyMCE().then(() => {
      // 富文本编辑器
      nextTick(() => {
        window.tinymce.init({
          selector: '#editor', // 选择器，指定哪个元素使用 TinyMCE
          license_key: 'gpl', // 许可密钥，如果是 GPL 版本则不需要设置
          language: 'zh_CN', // 语言设置
          width: '100%', // 编辑器宽度
          height: 500, // 编辑器高度
          menubar: false, // 是否显示菜单栏
          statusbar: true, // 是否显示状态栏
          branding: false, // 去除底部的 TinyMCE 广告
          toolbar: [
            'autoAnnotateRelation'
          ], // 工具栏按钮列表
          toolbar_sticky: true, // 工具栏固定在顶部
          content_css: '/tinymce/tinymce.css', // 自定义内容样式文件路径
          readonly: false, // 确保编辑器不是只读模式
          // 注册自定义按钮
          setup: function (editor) {
            // 注册自动关系标注按钮
            editor.ui.registry.addButton('autoAnnotateRelation', {
              text: '自动标注关系',
              tooltip: '自动标注文本中的关系',
              icon: 'bookmark',
              onAction: function () {
                // 调用Vue组件中的方法显示自动标注对话框
                autoAnnotateRelations();
              }
            });

            // 监听编辑器内容变化事件
            editor.on('NodeChange', function (e) {
              // 延迟执行以确保DOM已更新
              setTimeout(() => {
                // 为新添加的实体元素添加点击事件
                setupEntityClickHandlers(editor);
              }, 200);
            });

            // 监听编辑器内容变化并保存到后端
            editor.on('change', () => {
              form.content = editor.getContent();
              debouncedSaveContent(form.content);
            });
          },
          inline_boundaries_selector: 'a[href],code,.entity', // 允许实体元素可选择
          // 扩展有效元素，确保所有标注类型都能被保留
          extended_valid_elements: 'p[structure-type|class|style],span[data-entity-id|data-checked|data-mce-style|class|style|data-relation-id|data-relation-role|data-relation-target|data-relation-source|data-relation-target-text|data-relation-target-type|var-name]',
          content_style: `
          h2 { position: relative; z-index: 99; }
          h2::before {
            content: "";
            display: block;
            width: 200px;
            height: 8px;
            position: absolute;
            bottom: 6px;
            left: -4px;
            z-index: -1;
            border-radius: 4px 0 0 4px;
            background: linear-gradient(90deg, #F6AFB0 0%, #FFFFFF 100%);
          }
          .entity-arrow-indicator {
            display: inline-block;
            margin: 0 2px;
            font-weight: bold;
            color: blue;
          }
          .entity {
            position: relative;
            z-index: 10;
            pointer-events: auto !important;
            cursor: pointer !important;
          }
            /* 结构标注样式 */
            p[structure-type="juan"] { font-size: 24px; font-weight: bold; color: #333; }
            p[structure-type="pian"] { font-size: 22px; font-weight: bold; color: #444; }
            p[structure-type="zhang"] { font-size: 20px; font-weight: bold; color: #555; }
            p[structure-type="jie"] { font-size: 18px; font-weight: bold; color: #666; }
            p[structure-type="xiaojie"] { font-size: 16px; font-weight: bold; color: #777; }
            /* 实体标注样式 */
            span.entity[data-checked="true"] { border: 1px solid #4CAF50; box-shadow: 0 0 2px #4CAF50; }
            span.entity[data-checked="false"] { position: relative; }
            span.entity[data-checked="false"]::after {
              content: "";
              position: absolute;
              top: 0;
              right: 0;
              width: 8px;
              height: 8px;
              background-color: #ff4d4f;
              border-radius: 50%;
              transform: translate(50%, -50%);
              z-index: 100;
              box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
            }
            /* 其他样式 */
          body {
            pointer-events: auto !important;
          }
          p, span, div {
            pointer-events: auto !important;
          }
            /* 注释、疏、引用等样式 */
            span.zhu { color: #9C27B0; font-style: italic; }
            span.shu { color: #2196F3; text-decoration: underline; }
            span.yin { color: #FF5722; font-weight: bold; }
            span.zuozhe { color: #4CAF50; font-weight: bold; }
            span.mulu { color: #795548; text-decoration: underline; }
        `,
          init_instance_callback: (editorInstance) => {
            // 保存编辑器实例
            editor.value = editorInstance;

            // 从后端获取内容
            fetchDocumentContent();

            // 设置实体点击事件处理
            setTimeout(() => {
              setupEntityClickHandlers(editorInstance);
            }, 500);

            // 设置编辑器内容区域点击监听器
            setTimeout(() => {
              setupEditorClickListener();
            }, 500);

            // 确保LeaderLine库已加载，然后绘制关系箭头
            loadLeaderLine().then(() => {
              console.log('LeaderLine库已加载，开始绘制关系箭头');
              // 增加延迟时间，确保DOM已完全渲染
              setTimeout(() => {
                try {
                  drawAllRelations();
                  // 初始化时同步关系数据到editorStore
                  const existingRelations = JSON.parse(localStorage.getItem('relationsData') || '[]');
                  syncRelationsToStore(existingRelations);

                  // 添加额外的检查，确保关系箭头已绘制
                  setTimeout(() => {
                    if (relationLines.value.length === 0) {
                      console.log('关系箭头未绘制，尝试重新绘制');
                      drawAllRelations();
                    }
                  }, 1000);
                } catch (error) {
                  console.error('绘制关系箭头时出错:', error);
                  // 出错时尝试重新绘制
                  setTimeout(() => {
                    console.log('尝试重新绘制关系箭头');
                    drawAllRelations();
                  }, 500);
                }
              }, 500); // 增加延迟时间
            }).catch(error => {
              console.error('加载LeaderLine库失败:', error);
              // 尝试重新加载
              setTimeout(() => {
                console.log('尝试重新加载LeaderLine库');
                loadLeaderLine().then(() => {
                  console.log('重新加载LeaderLine库成功，重新尝试绘制关系箭头');
                  setTimeout(() => drawAllRelations(), 500);
                }).catch(err => {
                  console.error('重新加载LeaderLine库再次失败:', err);
                });
              }, 1000);
            });
          }
        });
      });
    }).catch(error => {
      console.error('加载TinyMCE失败:', error);
    });

    // 添加离开页面前的清理
    window.addEventListener('beforeunload', clearAllArrowsAndRelations);

    // 启动定时保存关系线信息
    relationSaveInterval.value = setInterval(saveRelationLinesToLocalStorage, 10); // 每10毫秒保存一次
  } catch (error) {
    console.error('关系标注组件挂载时出错:', error);
  }
});

// 设置实体点击事件处理函数
const setupEntityClickHandlers = (editorInstance) => {
  try {
    if (!editorInstance || !editorInstance.getBody) {
      console.warn('编辑器实例不存在或未完全初始化，无法设置实体点击事件');
      return;
    }

    const editorBody = editorInstance.getBody();
    if (!editorBody) {
      console.warn('编辑器Body不存在，无法设置实体点击事件');
      return;
    }

    // 获取所有实体元素
    const entityElements = editorBody.querySelectorAll('.entity');
    console.log(`找到 ${entityElements.length} 个实体元素`);

    // 为每个实体元素添加点击事件
    entityElements.forEach(entity => {
      // 移除现有的事件监听器以避免重复
      entity.removeEventListener('click', entityClickHandler);

      // 添加新的事件监听器，使用闭包保存对editorInstance的引用
      entity.addEventListener('click', (e) => {
        e.stopPropagation(); // 阻止事件冒泡
        handleEntityClick(e, editorInstance);
      });
    });

    console.log('已为所有实体元素设置点击事件');
  } catch (error) {
    console.error('设置实体点击事件时出错:', error);
  }
};

// 实体点击事件处理函数的包装器
const entityClickHandler = (e) => {
  e.stopPropagation(); // 阻止事件冒泡
  handleEntityClick(e, editor.value);
};

// 组件卸载前清理资源
onBeforeUnmount(() => {
  console.log('关系标注组件卸载，清理资源');

  // 移除窗口大小变化监听器
  window.removeEventListener('resize', handleResize);

  // 移除页面可见性变化监听器
  document.removeEventListener('visibilitychange', handleVisibilityChange);

  // 移除离开页面前的清理
  window.removeEventListener('beforeunload', clearAllArrowsAndRelations);

  // 清除关系线
  clearRelationLines();

  // 清除所有箭头指示器
  clearArrowIndicators();

  // 清除所有LeaderLine相关元素
  try {
    const leaderLineElements = document.querySelectorAll('div.leader-line, div.leader-line-label-wrapper, div.leader-line-caption, div.leader-line-line, div.leader-line-plug, div.leader-line-marker, [data-leader-line-element="true"]');
    leaderLineElements.forEach(element => {
      if (element && element.parentNode) {
        element.parentNode.removeChild(element);
      }
    });
  } catch (error) {
    console.warn('清除LeaderLine元素时出错:', error);
  }

  // 移除编辑器内容区域点击监听器
  if (editor.value && editor.value.getBody) {
    try {
      const editorBody = editor.value.getBody();
      if (editorBody) {
        editorBody.removeEventListener('click', handleEditorBodyClick);

        // 移除所有实体元素的点击事件监听器
        const entityElements = editorBody.querySelectorAll('.entity');
        entityElements.forEach(entity => {
          entity.removeEventListener('click', entityClickHandler);
        });
      }
    } catch (error) {
      console.warn('移除编辑器事件监听器时出错:', error);
    }
  }

  // 清除编辑器实例
  if (editor.value) {
    try {
      // 移除编辑器事件监听器
      editor.value.off('change');
      editor.value.off('click');
      editor.value.off('keydown');
      editor.value.off('NodeChange');
    } catch (error) {
      console.warn('清除编辑器事件监听器时出错:', error);
    }
  }

  // 清除全局变量
  window.relationToReplace = null;
  window.resizeTimer = null;

  // 清除实体选择状态
  clearEntitySelection();

  // 确保模式不再是关系标注
  editorStore.setAnnotationMode('');

  // 清除定时器
  if (relationSaveInterval.value) {
    clearInterval(relationSaveInterval.value);
    relationSaveInterval.value = null;
  }

  // 最后保存一次关系线信息
  saveRelationLinesToLocalStorage();

  // 最后保存一次内容到后端
  if (form.content) {
    debouncedSaveContent(form.content);
  }
});

// 添加页面可见性变化处理函数
const handleVisibilityChange = () => {
  if (document.visibilityState === 'visible') {
    console.log('页面变为可见，重新绘制关系箭头');
    setTimeout(() => {
      if (editor.value && editor.value.getBody) {
        clearRelationLines();
        drawAllRelations();
      }
    }, 500);
  }
};

// 处理关系添加事件
const handleRelationAdded = (relationData) => {
  console.log('关系已添加:', relationData);

  // 如果存在需要替换的关系，先删除旧关系
  if (window.relationToReplace) {
    // 从DOM中删除旧关系标记
    const editorBody = editor.value.getBody();
    const oldSourceSpans = editorBody.querySelectorAll(`span[data-entity-id="${window.relationToReplace.sourceId}"][data-relation-target="${window.relationToReplace.targetId}"][data-relation-id="${window.relationToReplace.relationId}"]`);
    const oldTargetSpans = editorBody.querySelectorAll(`span[data-entity-id="${window.relationToReplace.targetId}"][data-relation-source="${window.relationToReplace.sourceId}"][data-relation-id="${window.relationToReplace.relationId}"]`);

    // 移除源实体上的关系属性
    oldSourceSpans.forEach(span => {
      span.removeAttribute('data-relation-id');
      span.removeAttribute('data-relation-role');
      span.removeAttribute('data-relation-target');
      span.removeAttribute('data-relation-target-text');
      span.removeAttribute('data-relation-target-type');
    });

    // 移除目标实体上的关系属性
    oldTargetSpans.forEach(span => {
      span.removeAttribute('data-relation-id');
      span.removeAttribute('data-relation-role');
      span.removeAttribute('data-relation-source');
    });

    // 从localStorage中删除旧关系
    const existingRelations = JSON.parse(localStorage.getItem('relationsData') || '[]');
    const updatedRelations = existingRelations.filter(rel =>
      !(
        (rel.sourceEntity.id === window.relationToReplace.sourceId &&
          rel.targetEntity.id === window.relationToReplace.targetId) ||
        (rel.sourceEntity.id === window.relationToReplace.targetId &&
          rel.targetEntity.id === window.relationToReplace.sourceId)
      )
    );
    localStorage.setItem('relationsData', JSON.stringify(updatedRelations));

    // 清除关系线
    clearRelationLines();

    // 重置替换标记
    window.relationToReplace = null;
  }

  // 关系添加后清除选择
  clearEntitySelection();

  // 保存关系数据到 localStorage
  const existingRelations = JSON.parse(localStorage.getItem('relationsData') || '[]');

  // 检查是否已存在完全相同的关系（相同的源实体ID和目标实体ID，忽略关系类型）
  const isDuplicate = existingRelations.some(relation =>
    relation.sourceEntity.id === relationData.sourceEntity.id &&
    relation.targetEntity.id === relationData.targetEntity.id
  );
  // 如果关系不存在，则绘制箭头
  if (!isDuplicate) {
    // 立即绘制箭头 - 不清除现有箭头，不使用setTimeout
    drawRelationLine(
      relationData.sourceEntity,
      relationData.targetEntity,
      relationData.relation,
      false // 不清除现有箭头
    );

    // 添加到存储
    existingRelations.push(relationData);
    localStorage.setItem('relationsData', JSON.stringify(existingRelations));
    console.log('保存的关系数据:', existingRelations);

    // 同步关系数据到editorStore
    syncRelationsToStore(existingRelations);

    // 清理编辑器内容中可能存在的关系标签
    setTimeout(() => cleanupRelationLabelsInContent(), 100);

    // 只有在成功添加非重复关系时才显示成功消息
    ElMessage.success(`成功添加关系: ${relationData.sourceEntity.text} -> ${relationData.relation.text} -> ${relationData.targetEntity.text}`);
  } else {
    console.log('跳过重复的关系:', relationData);
    ElMessage.warning('已存在完全相同的关系，不重复添加');
  }
};

// 同步关系数据到editorStore
const syncRelationsToStore = (relations) => {
  // 获取当前的关系线数据
  const lines = relationLines.value.map(line => ({
    id: line.id,
    sourceId: line.sourceId,
    targetId: line.targetId,
    relationId: line.relationId,
    relationText: line.relationText
  }));

  // 更新到editorStore
  editorStore.updateRelationAnnotation(relations, lines);
};

// 清除所有关系线
const clearRelationLines = () => {
  // 移除所有关系线
  relationLines.value.forEach(line => {
    if (line.leaderLine) {
      try {
        const lineElement = line.leaderLine.element;
        if (lineElement && lineElement.parentNode) {
          line.leaderLine.remove();
        }
      } catch (error) {
        console.warn('移除关系线时出错:', error);
      }
    }
  });
  relationLines.value = [];
};

// 使用LeaderLine绘制关系线
const drawRelationLine = (sourceEntity, targetEntity, relation, clearExisting = true) => {
  try {
    // 如果需要清除现有关系线，则执行清除
    if (clearExisting) {
      clearRelationLines();
    }

    // 检查编辑器实例是否存在
    if (!editor.value || !editor.value.getBody) {
      console.error('编辑器实例不存在或未完全初始化，无法绘制关系线');
      return;
    }

    const editorBody = editor.value.getBody();
    if (!editorBody) {
      console.error('编辑器Body不存在，无法绘制关系线');
      return;
    }

    // 检查源实体和目标实体参数
    if (!sourceEntity || !sourceEntity.id) {
      console.error('源实体参数无效:', sourceEntity);
      return;
    }

    if (!targetEntity || !targetEntity.id) {
      console.error('目标实体参数无效:', targetEntity);
      return;
    }

    if (!relation || !relation.id) {
      console.error('关系参数无效:', relation);
      return;
    }

    const sourceElement = editorBody.querySelector(`span[data-entity-id="${sourceEntity.id}"]`);
    const targetElement = editorBody.querySelector(`span[data-entity-id="${targetEntity.id}"]`);

    if (!sourceElement) {
      console.error(`未找到源实体元素 (ID: ${sourceEntity.id})`);
      return;
    }

    if (!targetElement) {
      console.error(`未找到目标实体元素 (ID: ${targetEntity.id})`);
      return;
    }

    // 创建一个唯一的ID用于关系线
    const relationId = `relation-${sourceEntity.id}-${targetEntity.id}-${relation.id}-${Date.now()}`;

    // 确保LeaderLine库已加载
    if (typeof window.LeaderLine === 'undefined') {
      console.error('LeaderLine库未加载，请确保已安装依赖');
      return;
    }

    // 安全地获取关系类
    let relationClass = null;
    let color = '#1890ff'; // 默认颜色

    try {
      // 检查window.relations是否存在
      if (!window.relations) {
        console.warn('window.relations未定义，使用默认样式');
      } else {
        relationClass = window.relations.find(r => r.id === relation.id);
        if (!relationClass) {
          console.warn(`未找到ID为${relation.id}的关系类，使用默认样式`);
        } else if (!relationClass.style || !relationClass.style['background-color']) {
          console.warn(`关系类${relation.id}缺少样式或背景色，使用默认样式`);
        } else {
          color = relationClass.style['background-color'];
        }
      }
    } catch (error) {
      console.error('获取关系类时出错:', error);
    }

    let startSocket = 'top';
    let endSocket = 'bottom';
    const path = 'fluid'; // Default fluid path

    try {
      // 根据元素位置确定最佳连接点
      const sourceRect = sourceElement.getBoundingClientRect();
      const targetRect = targetElement.getBoundingClientRect();

      if (targetRect.top + targetRect.height < sourceRect.top) {
        startSocket = 'top';
        endSocket = 'bottom';
      } else if (targetRect.top > sourceRect.top + sourceRect.height) {
        startSocket = 'bottom';
        endSocket = 'top';
      } else if (targetRect.left + targetRect.width < sourceRect.left) {
        startSocket = 'left';
        endSocket = 'right';
      } else {
        startSocket = 'right';
        endSocket = 'left';
      }
    } catch (error) {
      console.warn('计算连接点时出错，使用默认连接点:', error);
    }

    // 创建LeaderLine实例
    let line;
    try {
      line = new window.LeaderLine(
        sourceElement,
        targetElement,
        {
          color: color,
          size: 2.5,
          startSocket: startSocket,
          endSocket: endSocket,
          path: path,
          startSocketGravity: 50,
          endSocketGravity: 50,
          startPlug: 'behind',
          endPlug: 'arrow3',
          endPlugSize: 1.5,
          startPlugColor: color,
          endPlugColor: color,
          // 添加性能优化选项
          animOptions: { duration: 300, timing: 'linear' }
        }
      );
    } catch (error) {
      console.error('创建LeaderLine实例时出错:', error);
      return;
    }

    // 使用关系类型文本作为标签
    if (relation.text) {
      try {
        line.setOptions({
          middleLabel: window.LeaderLine.captionLabel(relation.text, {
            color: color,
            fontWeight: 'bold',
            fontSize: '12px',
            fontFamily: 'Arial, sans-serif',
            padding: [4, 8, 4, 8],
            backgroundColor: 'white',
            borderRadius: 3,
            borderWidth: 1.5,
            borderColor: color
          })
        });

        if (relation.text === '引用') {
          line.setOptions({
            dash: { len: 5, gap: 3 }
          });
        }
      } catch (error) {
        console.warn('设置关系标签时出错:', error);
      }
    }

    // 保存关系信息以便后续管理
    relationLines.value.push({
      id: relationId,
      sourceId: sourceEntity.id,
      targetId: targetEntity.id,
      relationId: relation.id,
      relationText: relation.text,
      leaderLine: line
    });

    // 确保关系线元素不会被保存到编辑器内容中
    setTimeout(() => {
      try {
        // 查找LeaderLine创建的所有元素
        const leaderLineElements = document.querySelectorAll('div.leader-line, div.leader-line-label-wrapper, div.leader-line-caption, div.leader-line-line, div.leader-line-plug, div.leader-line-marker');
        leaderLineElements.forEach(element => {
          // 添加属性，使TinyMCE忽略这些元素
          element.setAttribute('data-mce-bogus', 'all');
          // 额外添加一个自定义属性，便于后续清理
          element.setAttribute('data-leader-line-element', 'true');
        });

        // 在绘制完成后主动清理一次编辑器内容
        setTimeout(() => cleanupRelationLabelsInContent(), 50);
      } catch (error) {
        console.warn('设置LeaderLine元素属性时出错:', error);
      }
    }, 50);

    // 添加右键菜单事件
    const handleContextMenu = (e) => {
      try {
        if (e.target === line.element) {
          e.preventDefault();
          if (confirm('是否删除此关系？')) {
            try {
              line.remove();
            } catch (error) {
              console.warn('移除关系线时出错:', error);
            }

            const index = relationLines.value.findIndex(item => item.id === relationId);
            if (index !== -1) {
              relationLines.value.splice(index, 1);

              // 同时从localStorage中移除该关系
              try {
                const existingRelationsStr = localStorage.getItem('relationsData');
                if (existingRelationsStr) {
                  const existingRelations = JSON.parse(existingRelationsStr);
                  const updatedRelations = existingRelations.filter(rel =>
                    !(rel.sourceEntity.id === sourceEntity.id &&
                      rel.targetEntity.id === targetEntity.id &&
                      rel.relation.id === relation.id)
                  );
                  localStorage.setItem('relationsData', JSON.stringify(updatedRelations));

                  // 同步更新后的关系数据到editorStore
                  syncRelationsToStore(updatedRelations);
                }
              } catch (error) {
                console.error('更新localStorage中的关系数据时出错:', error);
              }

              // 更新DOM中的关系属性
              try {
                const editorBody = editor.value.getBody();
                if (editorBody) {
                  const sourceSpans = editorBody.querySelectorAll(`span[data-entity-id="${sourceEntity.id}"][data-relation-target="${targetEntity.id}"][data-relation-id="${relation.id}"]`);
                  const targetSpans = editorBody.querySelectorAll(`span[data-entity-id="${targetEntity.id}"][data-relation-source="${sourceEntity.id}"][data-relation-id="${relation.id}"]`);

                  // 移除源实体上的关系属性
                  sourceSpans.forEach(span => {
                    span.removeAttribute('data-relation-id');
                    span.removeAttribute('data-relation-role');
                    span.removeAttribute('data-relation-target');
                    span.removeAttribute('data-relation-target-text');
                    span.removeAttribute('data-relation-target-type');
                  });

                  // 移除目标实体上的关系属性
                  targetSpans.forEach(span => {
                    span.removeAttribute('data-relation-id');
                    span.removeAttribute('data-relation-role');
                    span.removeAttribute('data-relation-source');
                  });
                }
              } catch (error) {
                console.error('更新DOM中的关系属性时出错:', error);
              }
            }
            document.removeEventListener('contextmenu', handleContextMenu);
          }
        }
      } catch (error) {
        console.error('处理右键菜单事件时出错:', error);
        document.removeEventListener('contextmenu', handleContextMenu);
      }
    };

    document.addEventListener('contextmenu', handleContextMenu);

    // 保存关系线信息到localStorage
    saveRelationLinesToLocalStorage();
  } catch (error) {
    console.error('绘制关系线时出错:', error);
  }
};

// 动态加载LeaderLine库
const loadLeaderLine = () => {
  return new Promise((resolve, reject) => {
    // 如果已经加载，直接返回
    if (window.LeaderLine) {
      console.log('LeaderLine库已存在，无需重新加载');
      resolve(window.LeaderLine);
      return;
    }

    console.log('开始加载LeaderLine库...');

    // 检查是否已经有script标签在加载
    const existingScript = document.querySelector('script[src*="leader-line"]');
    if (existingScript) {
      console.log('发现正在加载的LeaderLine脚本，等待加载完成');
      existingScript.onload = () => {
        console.log('现有LeaderLine脚本加载完成');
        if (window.LeaderLine) {
          resolve(window.LeaderLine);
        } else {
          reject(new Error('LeaderLine库加载完成但未定义'));
        }
      };
      existingScript.onerror = () => {
        reject(new Error('现有LeaderLine脚本加载失败'));
      };
      return;
    }

    // 创建新的script标签
    const script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/leader-line@1.0.7/leader-line.min.js';
    script.async = true;

    // 设置加载超时
    const timeout = setTimeout(() => {
      console.warn('LeaderLine库加载超时，尝试使用备用CDN');
      // 移除原有脚本
      if (script.parentNode) {
        script.parentNode.removeChild(script);
      }

      // 尝试使用备用CDN
      const backupScript = document.createElement('script');
      backupScript.src = 'https://unpkg.com/leader-line@1.0.7/leader-line.min.js';
      backupScript.async = true;

      backupScript.onload = () => {
        console.log('备用CDN LeaderLine库加载成功');
        clearTimeout(backupTimeout);
        if (window.LeaderLine) {
          resolve(window.LeaderLine);
        } else {
          reject(new Error('备用CDN LeaderLine库加载完成但未定义'));
        }
      };

      backupScript.onerror = () => {
        reject(new Error('备用CDN LeaderLine库加载失败'));
      };

      // 设置备用CDN加载超时
      const backupTimeout = setTimeout(() => {
        reject(new Error('备用CDN LeaderLine库加载超时'));
      }, 10000);

      document.head.appendChild(backupScript);
    }, 5000);

    script.onload = () => {
      console.log('LeaderLine库加载成功');
      clearTimeout(timeout);
      if (window.LeaderLine) {
        resolve(window.LeaderLine);
      } else {
        reject(new Error('LeaderLine库加载完成但未定义'));
      }
    };

    script.onerror = () => {
      clearTimeout(timeout);
      reject(new Error('LeaderLine库加载失败'));
    };

    document.head.appendChild(script);
  });
};

// 添加自动关系标注函数
const autoAnnotateRelations = () => {
  console.log('自动关系标注按钮被点击');
  // 显示自动标注关系对话框
  autoAnnotateRelationVisible.value = true;
  ElMessage.info('正在打开自动关系标注对话框');
};

// 添加编辑器内容区域的点击监听
const setupEditorClickListener = () => {
  if (editor.value && editor.value.getBody) {
    const editorBody = editor.value.getBody();

    // 移除之前的监听器以避免重复
    editorBody.removeEventListener('click', handleEditorBodyClick);

    // 添加新的监听器
    editorBody.addEventListener('click', handleEditorBodyClick);

    console.log('已设置编辑器内容区域点击监听器');
  }
};

// 处理编辑器内容区域的点击事件
const handleEditorBodyClick = (e) => {
  // 检查点击的是否是实体标注
  if (!e.target.classList.contains('entity')) {
    // 点击了非实体区域
    if (sourceEntity.value && !targetEntity.value) {
      // 如果已选择源实体但未选择目标实体，则清除选择
      clearEntitySelection();
      ElMessage.info('已取消实体选择');
    }
  }
};

// 清理所有箭头和关系线的函数
const clearAllArrowsAndRelations = () => {
  clearArrowIndicators();
  clearRelationLines();

  // 清除所有LeaderLine相关元素
  try {
    const leaderLineElements = document.querySelectorAll('div.leader-line, div.leader-line-label-wrapper, div.leader-line-caption, div.leader-line-line, div.leader-line-plug, div.leader-line-marker, [data-leader-line-element="true"]');
    leaderLineElements.forEach(element => {
      if (element && element.parentNode) {
        element.parentNode.removeChild(element);
      }
    });
  } catch (error) {
    console.warn('清除LeaderLine元素时出错:', error);
  }
};
</script>
<style scoped>
.horizontal-container {
  display: flex;
  pointer-events: auto;
  /* 确保容器本身可以接收鼠标事件 */
}

.horizontal-container>div:nth-child(1),
.horizontal-container>div:nth-child(3) {
  flex: 1;
}

.horizontal-container>div:nth-child(2) {
  flex: 3;
}

/*中间内容区域*/
.content-area {
  width: 100%;
  height: 625px;
  border: 1px solid #ffffff;
  border-radius: 10px;
  background-color: #ffffff;
  margin-right: 10px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  /* 确保内容区域可以接收鼠标事件 */
}

#editor {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.tox-toolbar__primary {
  background-color: #c45656;
}

/* 样式定义 */
.relation-arrow {
  position: absolute;
  z-index: 1000;
  pointer-events: none;
}
</style>
